<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内置样式 -->
    <style>
       div {
        width: 100px; ;
        height: 100px;
background-color: blue;
       }
       span{
        width: 100px;
        height: 100px;
        background-color: yellow;
       }
    </style>
</head>
<body>
    <!-- 块级元素
         1.独占一行
         2.高度默认由系统决定
         3.可以通过css属性设置宽高 -->
         <div>我是一个div</div>
         <div>我是一个div</div>
         <p>段落标签</p>
         <h1>一级标题</h1>
         <h2>二级标题</h2>
         <h3>三级标题</h3>
         <h4>四级标题</h4>
         <h5>五级标题</h5>
         <h6>六级标题</h6>
    <!-- 行内元素
        1.与其他行内元素共享一个空间
        2.高度默认由元素内容撑起
        3.无法通过css属性设置宽高 -->
        <span>我是一个行内元素</span><span>我也是一个行内元素</span>
        <em>斜体标签</em>
        <i>斜体标签</i>
        <b>加粗标签</b>
        <strong>加粗</strong>
        <sub>下标</sub>
        <sup>上标</sup>
        <!-- 超链接标签  target控制页面打开方式 blank新页面打开 self自身窗口打开链接-->
         <a href="https://www.baidu.com"target=>百度一下</a>
        <!-- 可以用来做锚点 -->
         <a href="#">回到顶部</a>
    <!-- 常见标签 img标签 a标签 video标签 audio标签-->
     <!-- 图片标签  标签内部属性 属性名=属性值 src属性连接到图片地址 alt图片加载失败的提示说明
      ./当前目录 ../上一级目录 width和height是图片的特有属性-->
      <img width="200px" src="../音视频/6.jpg" alt="图片加载失败的文字说明">
      <img  height="200px" src="https://inews.gtimg.com/om_bt/OkEPpEM1AZfKFIi1Xq5YapKDWpVWWex8WQ-HJ-QG3VPO0AA/641"alt>
    <!-- 视频标签 video width height也可以设置给视频  
          controls控制条
          autoplay 自动播放
          loop 循环播放
          muted 静音播放
          poster 封面-->
     <video width="300px"      poster="../音视频/6.jpg"   controls   src="../音视频/1.mp4"></video>
     <!-- 音频 audio 
          controls控制条
          autoplay 自动播放
          loop 循环播放
          muted 静音播放
          不可以使用poster width height-->
    <audio   controls      src="../音视频/1.mp3"></audio>





</body>
</html>

